<template>
  <div class="case-detail">
    <el-card class="box-card left-panel">
      <div slot="header" class="clearfix">
        <span>案件名称: <el-tag type="warning">{{name}}</el-tag></span>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{'详情内容 ' + o }}
      </div>
    </el-card>
    <el-card class="box-card case-container" id="container"></el-card>
  </div>
</template>

<script>
import G6 from '@antv/g6';
import api from "@/api/case/index.api";
import case_icon from '@/assets/img/case/case_icon.png'

export default {
  name: "caseDetail",
  data() {
    return {
      topData: [],
    }
  },
  computed: {
    name() {
      return this.$route.query.name
    }
  },
  mounted() {
    this.getCaseDetailsHandle()
  },
  methods: {
    async getCaseDetailsHandle() {
      const { id } = this.$route.query;
      try {
        const res = await api.getCaseDetails({ fraud_name_id: id, id });
        this.topData = this.processNode(res);
        this.initTreeGraph();
      } catch (error) {
        console.error('获取案件详情失败:', error);
      }
    },

    initTreeGraph() {
      const container = document.getElementById('container');
      const width = container.scrollWidth;
      const height = container.scrollHeight || 700;
      // 注册自定义节点
      G6.registerNode('icon-node', {
        draw(cfg, group) {
          const r = 20; // 圆形半径
          // 绘制圆形背景
          const circle = group.addShape('circle', {
            attrs: {
              x: 0,
              y: 0,
              r,
              // fill: cfg.isLeaf ? '#cfe0ec' : '#f8fcff',
              // stroke: '#cedcee',
              lineWidth: 0,
              shadowColor: '#c0e0f7',
              shadowBlur: 10,
              cursor: 'pointer'
            },
            name: 'circle-shape',
            draggable: true
          });

          // 添加图标
          group.addShape('image', {
            attrs: {
              x: -20,
              y: -20,
              width: 40,
              height: 40,
              img: case_icon,
              cursor: 'pointer'
            },
            name: 'image-shape',
            draggable: true

          });

          // 添加标签
          group.addShape('text', {
            attrs: {
              x: r + 5,
              y: 12,
              textAlign: 'left',
              text: cfg.label,
              fill: '#3a4a5a',
              fontSize: 12,
            },
            name: 'text-shape',
          });

          return circle;
        }
      });

      // 创建树图实例
      const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        modes: {
          default: [
            {
              type: 'collapse-expand',  // 折叠展开功能
              onChange: function(item, collapsed) {
                const data = item.getModel();
                data.collapsed = collapsed;
                return true;
              },
              animation: 0.1
            },
            'drag-canvas',   // 拖拽画布
            'drag-node',   // 拖拽画布
            'zoom-canvas',   // 缩放画布
          ],
        },
        defaultNode: {
          type: 'icon-node',
          size: [40, 40],
        },
        defaultEdge: {
          type: 'line',  // 水平曲线边
          style: {
            stroke: '#c0e0f7',
            lineWidth: 1.5,
          },
        },
        layout: {
          type: 'compactBox',  // 紧凑树布局
          direction: 'LR',     // 从左到右布局
          getHeight: () => 40,  // 节点高度
          getWidth: () => 40,  // 节点宽度
          getVGap: () => 20,    // 垂直间距
          getHGap: () => 100,   // 水平间距
        },
      });

      // 绑定事件
      graph.on('node:mouseenter', e => {
        graph.setItemState(e.item, 'hover', true);
      });

      graph.on('node:mouseleave', e => {
        graph.setItemState(e.item, 'hover', false);
      });

      // 渲染数据
      graph.data(this.topData);
      graph.render();
      graph.fitView();

      // 响应式调整
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
    },

    // 处理节点数据
    processNode(node) {
      const root = {
        id: `${node.name}\n${node.value}`,
        label: `${node.name}\n${node.value}`,
        children: []
      };

      if (node.children && Array.isArray(node.children)) {
        root.children = node.children.map(child => {
          const childNode = {
            id: `${child.name}\n${child.value}`,
            label: `${child.name}\n${child.value}`,
            children: []
          };

          if (child.children && typeof child.children === 'object') {
            childNode.children.push({
              id: `${child.children.name}\n${child.children.value}`,
              label: `${child.children.name}\n${child.children.value}`,
              isLeaf: true
            });
          }

          return childNode;
        });
      }

      return root;
    }
  }
};
</script>

<style scoped lang="stylus">
.case-detail {
  min-height: inherit;
  padding: 20px;
  display: flex;
  gap: 20px;
  .left-panel {
    width: 300px;
    flex-shrink: 0;
    font-size: 13px;
  }
  .case-container {
    flex-grow: 1;
    height: 700px;
  }
}
</style>
